<template>
  <div class="box">
    <div class="main-re">
      <div class="main-left">
        <SongHeader :songDetail="songs"></SongHeader>
        <Comment :commentAlbumId="commentId"></Comment>
      </div>

            <div class="main-right">
              <div class="g-wrap7">

                <h3 class="u-hd4">相似歌曲</h3>
                <ul class="m-rctlist">
                  <li v-for="(s,i) in simiSong" :key="i">
                    <div class="txt">
                      <div class="f-thide">
                        <router-link :to="{name:'SongDetail',params:{id:s.id}}" class="s-fc1" :title="s.name">{{s.name}}</router-link>
                      </div>
                      <div class="f-thide s-fc4">
                        <span >
                          <router-link :to="{name:'Work',params:{id:a.id}}" class="s-fc4" v-for="(a,b) in s.artists" :key="b" :title="a.name" style="color: #999;">{{a.name}}
                            <span v-if="b!=s.artists.length-1">/&nbsp;</span>
                          </router-link>

                        </span>
                      </div>
                    </div>
                    <div class="opr f-cb">
                      <a href="javascript:;" class="play" @click.prevent="sentSongUrl(s)"></a>
                      <a href="javascript:;" class="addto" @click.prevent="addSongList(s)"></a>
                    </div>
                  </li>
                </ul>
                <h3 class="u-hd5">网易云音乐多端下载</h3>
                <ul class="m-multi">
                  <li>
                    <a href="#">
                      iPhone
                    </a>
                  </li>
                  <li>
                    <a href="#">PC</a>
                  </li>
                  <li>
                    <a href="#">Android</a>
                  </li>
                </ul>
                <p class="mu-p">同步歌单，随时畅听320k好音乐</p>
              </div>
            </div>

    </div>
  </div>
</template>

<script>
import Header from "@/components/Header";
import Footer from "@/components/Footer";
import SubNav from "@/components/SubNav";
import Comment from "@/views/SongDetail/Comment";
import SongHeader from "@/views/SongDetail/SongHeader";
import {voiceDuration} from "@/utils/voiceDuration";
import {mapState} from "vuex";

export default {
  name: 'index',

  components: {
    Header, Footer, SubNav, SongHeader, Comment
  },
  data() {
    return {
      voiceDuration: voiceDuration,
      commentId:'',
      simiSong:[]
    }
  },
  methods:{
    sentSongUrl(i){
      this.$store.commit('track/SETMUSIC',i)
    },
    addSongList(i){
      this.$store.commit('track/ADDMUSICLIST',i)
    },
    async getSimiSong(){
      let result = await this.$API.reqSimiSong(this.$route.params.id)
      this.simiSong = result.data.songs
    }
  },
  mounted() {
    this.$store.dispatch('songDetailList/getSongDetail', this.$route.params.id)
    this.$store.dispatch('songDetailList/getSongLyric', this.$route.params.id)
  },
  computed: {
    ...mapState('songDetailList',['songs',])
  },
  created() {

    this.commentId = this.$route.params.id
    this.getSimiSong()
  }


}
</script>

<style scoped lang="less">
.box {
  margin: 0 auto;
}

.main-re {
  width: 982px;
  margin: 0 auto;
  height: 100%;
  overflow: hidden;
  border: 1px solid #D3D3D3;

  .main-left {
    width: 710px;
    float: left;
    border-right: 1px solid #D3D3D3;
  }
}

.main-right {
  width: 270px;
  height: 800px;
  float: right;

  .g-wrap7 {
    padding: 20px 40px 40px 30px;

    .u-hd3 {
      height: 23px;
      margin-bottom: 20px;
      border-bottom: 1px solid #ccc;
    }

    .m-piclist {
      height: auto;
      overflow: hidden;
      margin-left: -13px;
      padding-bottom: 25px;

      li {
        width: 53px;
        height: 53px;
        display: inline;
        float: left;
        padding: 0 0 13px 13px;

        a {
          width: 40px;
          height: 40px;

          img {
            width: 40px;
            height: 40px;
          }
        }
      }
    }

    .u-hd4 {
      height: 23px;
      margin-bottom: 20px;
      border-bottom: 1px solid #ccc;
    }

    .m-rctlist {
      overflow: hidden;
      height: auto;
      li {
        height: auto;
        overflow: hidden;
        margin-top: 10px;

        .txt{
          float: left;
          width: 156px;
          line-height: 16px;
          .f-thide{
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            word-wrap: normal;
            .s-fc1{
              color: #333;
            }
          }
          .s-fc4{
            color: #333;
            .Nan{

            }
          }
        }
        .opr{
          float: right;
          position: relative;
          top: 10px;
          line-height: 32px;
          a{
            float: left;
            width: 10px;
            height: 11px;
            cursor: pointer;
            background: url(../../assets/icon2.png) no-repeat -9999px -9999px;
            opacity: 0.9;
          }
          .play{
            margin-right: 16px;
            background-position: -69px -455px;
          }
          .addto{
            background-position: -87px -454px;
          }
        }
        .f-cb{

        }
      }
    }

    .u-hd5 {
      height: 23px;
      margin-top: 30px;
      margin-bottom: 20px;
      border-bottom: 1px solid #ccc;
    }

    .m-multi {
      height: 65px;
      margin-bottom: 10px;
      background-position: 0 -392px;
      background-image: url("../../assets/sprite.png");

      li {
        float: left;

        &:nth-child(1) {
          a {
            display: block;
            width: 42px;
            height: 48px;
            text-indent: -9999px;
          }
        }

        &:nth-child(2) {
          width: 60px;
          height: 48px;
          margin: 0 26px 0 30px;

          a {
            display: inline-block;
            text-indent: -9999px;
            width: 60px;
            height: 48px;
          }
        }

        &:nth-child(3) {
          a {
            display: block;
            width: 42px;
            height: 48px;
            text-indent: -9999px;
          }
        }
      }
    }

    .mu-p {
      color: #999;
    }
  }
}

.songList {
  width: 670px;
  padding-top: 25px;

  min-height: 400px;
  margin: 0 auto;

  .tlt {
    width: 640px;
    height: 35px;
    margin: 0 auto;
    border-bottom: 2px solid #c20c0c;

    .out-list {
      width: 100px;
      height: 16px;
      float: right;
      display: flex;
      margin-right: 20px;
      align-items: center;
      margin-top: 10px;

      .u-icn {
        width: 16px;
        height: 16px;
        display: inline-block;
        background-image: url("../../assets/icon.png");
        background-position: -34px -863px;
      }

      a {
        color: #4996d1;
        text-decoration: underline;
      }
    }

    h3 {
      font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
      font-size: 20px;
      line-height: 28px;
      font-weight: normal;
      color: #333;
      float: left;
    }

    .sub {
      margin: 9px 0 0 20px;
      float: left;
      color: #666;
      font-size: 12px;
      font-family: Arial, Helvetica, sans-serif;
      -webkit-text-size-adjust: none;
    }

    .more {
      margin-top: 9px;
      height: 16px;
      float: right;

      .fc {
        color: #c20c0c;
        font-weight: bold;
      }
    }
  }

  .m-table {
    width: 640px;
    margin: 0 auto;
    border-bottom: 1px solid #D9D9D9;
    border-left: 1px solid #D9D9D9;
    border-right: 1px solid #D9D9D9;

    tr {
      width: 100%;
      vertical-align: inherit;
      font-weight: bold;
      text-align: -internal-center;

      th {
        text-align: left;
        height: 38px;
        background-color: #f7f7f7;
        background-position: 0 0;
        background-repeat: repeat-x;
        border-right: 1px solid #DEDEDE;

        div {
          height: 18px;
          line-height: 18px;
          padding: 8px 10px;
          color: #666;
          font-weight: normal;
          background-position: 0 -56px;
        }
      }
    }

    tbody {
      tr:nth-child(odd){
        background-color: #F7F7F7;
      }
      tr {
        height: 30px;


        &:hover .oper {
          display: block !important;
        }

        &:hover .u-dur {
          display: none;
        }

        td {
          height: 30px;
        }

        .filst {
          .hd {
            height: 18px;


            .num-hd {
              color: #666;
              width: 25px;
              height: 18px;
              display: inline-block;
              font-weight: normal;
              float: left;
              line-height: 18px;
              margin-left: 15px;
              margin-right: 10px;
            }

            .bg-img {
              float: left;
              display: inline-block;
              width: 17px;
              height: 17px;
              background: url("../../assets/table.png") no-repeat 0 -103px;
            }
          }
        }

        .rank {
          padding-top: 10px;
          padding-bottom: 10px;

          .f-cb {

            display: flex;
            align-content: center;

            a {
              color: #666;
              font-weight: normal;
            }

            .texe {
              margin-left: 10px;
              display: flex;
              align-items: center;
              justify-content: center;

              .icon-img {
                display: inline-block;
                width: 17px;
                height: 17px;
                background: url("../../assets/table.png") no-repeat -20px -128px;
              }

              .txt {
                a {
                  color: #333;
                  font-weight: normal;
                }
              }
            }

            a {
              margin-left: 10px;

              .img-data {
                width: 50px;
                height: 50px;
              }
            }

          }
        }

        .s-fc3 {
          .oper {
            display: none;
            float: left;

            a {
              width: 13px;
              height: 13px;
              float: left;
              margin-top: 2px;
              display: inline-block;

              background: url("../../assets/icon.png") no-repeat 0 -700px;

            }

            .s-bg-11 {
              float: left;
              width: 18px;
              height: 16px;
              margin: 2px 0 0 4px;
              overflow: hidden;
              text-indent: -999px;
              cursor: pointer;
              background: url("../../assets/table.png") no-repeat 0 -174px;
            }

            .u-icn-81 {
              float: left;
              width: 18px;
              height: 16px;
              margin: 2px 0 0 4px;
              overflow: hidden;
              text-indent: -999px;
              cursor: pointer;
              background: url("../../assets/table.png") no-repeat 0 -195px;
            }

            .s-bg-12 {
              float: left;
              width: 18px;
              height: 16px;
              margin: 2px 0 0 4px;
              overflow: hidden;
              text-indent: -999px;
              cursor: pointer;
              background: url("../../assets/table.png") no-repeat -81px -174px;
            }
          }

          .u-dur {
            color: #666;
            margin-left: 5px;
            font-weight: normal;
          }
        }

        .singer {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;

          .text {
            a {
              color: #666;
              margin-left: 5px;
              font-weight: normal;
            }
          }

          .album {

            margin-left: 5px;

            a {
              color: #666;
              font-weight: normal;

            }
          }
        }
      }
    }
  }
}
</style>